<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
canvas {
    border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="tutorial" width="300" height="300"></canvas>
<script type="text/javascript">
    
function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(40, 50);
    ctx.lineTo(260, 50);
    ctx.lineTo(260,200);
    ctx.lineTo(40,200);
    ctx.lineTo(40,50);
    ctx.lineTo(150,140);
    ctx.lineTo(260,50);
    ctx.lineTo(260,200);
    ctx.lineTo(178,116);
    ctx.lineTo(260,200);
    ctx.lineTo(40,200);
    ctx.lineTo(120,116);
    //   ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
    ctx.stroke(); //描边。stroke不会自动closePath()
}
draw();
</script>
</body>